<template>
  <div class="inspectResultInfo">
    <div slot="header" style="display: flex;align-items: center;justify-content: space-between">
      <span class="resultTitle">质检结果</span>
      <div>
        <el-button size="small" plain type="primary" @click="generatedReport">生成报告</el-button>
        <el-button size="small" plain type="primary" @click="feedbackResult">反馈质检结果</el-button>
        <el-button size="small" plain type="primary" @click="downloadReport" :loading="downloadReportLoading">下载报告</el-button>
      </div>
    </div>
    <div style="padding: 30px 100px">
        <div class="ha-top">
          <p class="taskName">{{resultInfo.taskName}}</p>
          <div>{{resultInfo.resultSummarize}}</div>
        </div>
        <el-tabs type="card" v-model="ruleCount" style="margin-top: 20px">
          <el-tab-pane label="按规则统计" name="ruleCount">
            <el-table :data="resultRuleCountList" style="width: 100%" max-height="250" align="center">
              <el-table-column type="index" label="序号"/>
              <el-table-column prop="validateName" label="质检规则"/>
              <el-table-column prop="className" label="问题类型"/>
              <el-table-column label="问题数量">
                <template v-slot="scope">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium" @click="toDetailListByRule(scope.row)">{{ scope.row.failCount }}</el-tag>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="按区域统计" name="areaCount">
            <el-table :data="resultAreaCountList" style="width: 100%" max-height="250" align="center">
              <el-table-column type="index" label="序号"/>
              <el-table-column prop="deptName" label="区域名称"/>
              <el-table-column prop="failCount" label="问题数量">
                <template v-slot="scope">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium" @click="toDetailListByArea(scope.row)">{{ scope.row.failCount }}</el-tag>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {
  queryResultSummarize,
  queryResultStatisticsByRule,
  queryResultStatisticsByArea,
  generatedResultReport,
  feedbackInspectResult,
  getReportFileId
} from '@/api/inspectTask';
import NTitle from "@/components/NTitle.vue";
import {Message} from "element-ui";

@Component({
  components: {
    NTitle
  }
})
export default class InspectResultInfo extends Vue {
  @Prop()  private resultId: any;
  public resultInfo : any = {};
  public resultRuleCountList: any = [];
  public resultAreaCountList: any = [];
  downloadReportLoading : any = false;
  ruleCount:any='ruleCount'
  getResultSummarize(resultId?:number){
    queryResultSummarize({resultId: resultId}).then(res =>{
      if (res) {
        this.resultInfo = res.data
      }
    });
  }
  getResultRuleCount(resultId?:number){
    queryResultStatisticsByRule({resultId: resultId}).then(res =>{
      if (res && res.data) {
        this.resultRuleCountList = res.data
      }
    });
  }
  getResultAreaCount(resultId?:number){
    queryResultStatisticsByArea({resultId: resultId}).then(res =>{
      if (res && res.data) {
        this.resultAreaCountList = res.data
      }
    });
  }
  //生成质检报告
  generatedReport() {
    generatedResultReport({id: this.resultId}).then(res => {
      if (!res) {
        this.$message.error("生成报告失败")
      }
    })
  }
  //反馈质检结果
  feedbackResult() {
    const h = this.$createElement;
    this.$msgbox({
      title: '提示',
      message: h('p', undefined, [
        h('span', undefined, '反馈采集后，将不能再进行人工质检，是否继续？若反馈采集后需要人工质检，请进行新一轮的质检')
      ]),
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = '执行中...';
          setTimeout(() => {
            done();
            setTimeout(() => {
              instance.confirmButtonLoading = false;
            }, 300);
          }, 1000);
        } else {
          done();
        }
      }
    }).then(action => {
      feedbackInspectResult({id: this.resultId})
    });
  }
  //下载报告
  downloadReport() {
    this.downloadReportLoading = true;
    getReportFileId({resultId:this.resultId}).then(res=>{
      if (res.data) {
        const link = document.createElement('a');
        link.href = process.env.VUE_APP_BASE_API +'/resources/file/'+res.data.fileId;
        link.setAttribute('download','test.doc');
        link.click();
        link.remove();
      }
    }).catch(err=> {
      Message.error("未生成质检报告")
    }).finally(()=> {
      this.downloadReportLoading = false;
    })
  }
  toDetailListByRule(row) {
    if (row.failCount == 0) {
      return
    }
    let serialNumber = new Date().getTime()+'';
    this.$router.push({ path: '/quality/inspectDetail/list', query: { ruleDetailId: row.ruleDetailId, inspectResultId: row.inspectResultId, areaName:row.areaName, serialNumber:serialNumber}});
  }
  toDetailListByArea(row) {
    if (row.failCount == 0) {
      return
    }
    let serialNumber = new Date().getTime()+'';
    this.$router.push({ path: '/quality/inspectDetail/list', query: {deptId: row.deptId, inspectResultId: row.inspectResultId, areaName:row.areaName, serialNumber:serialNumber}});
  }
  mounted(){
    this.getResultSummarize(this.resultId);
    this.getResultRuleCount(this.resultId)
    this.getResultAreaCount(this.resultId)
  }
}
</script>
<style lang="scss" scoped>
.inspectResultInfo{
  background-color: #ffffff;
  height: 100%;
  .haz-header{
    height: 28px;
    line-height: 28px;
    color: #448f7d;
    padding-left: 18px;
    border-left: 3px solid #448f7d;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(to right, #e1f5f1, rgba(255, 255, 255, 1));
  }
}
.resultTitle{
  color: #5b9a8e;
  font-weight: bold;
  font-size: 14px;
  padding-bottom: 6px;
  cursor: pointer;
  width: fit-content;
}
.taskName{
  color: #5b9a8e;
  font-size: 20px;
  padding-bottom: 6px;
  cursor: pointer;
  width: fit-content;
}
</style>
